        
<div class="nav-wrapper">
    <ul id="nav"
        class="nav"
        data-slim-scroll
        data-collapse-nav
        data-highlight-active>
        <li class="nav-title">
            <span data-translate="NAVIGATION"></span>
        </li>
        <li><a href="#/dashboard"> <i class="ti-home"></i><span data-translate="DASHBOARD"></span> </a></li>
        <li>
            <a href="#/ui"><i class="ti-bag"></i><span data-translate="UI_KIT"></span></a>
            <ul>
                <li><a href="#/ui/typography"><i class="ti-angle-right"></i><span data-translate="TYPOGRAPHY"></span></a></li>
                <li><a href="#/ui/icons"><i class="ti-angle-right"></i><span data-translate="ICONS"></span> <span class="badge badge-info">4</span></a></li>
                <li><a href="#/ui/buttons"><i class="ti-angle-right"></i><span data-translate="BUTTONS"></span></a></li>
                <li><a href="#/ui/components"><i class="ti-angle-right"></i><span data-translate="COMPONENTS"></span> <span class="badge badge-danger">18</span></a></li>
                <li><a href="#/ui/boxes"><i class="ti-angle-right"></i><span data-translate="BOXES"></span></a></li>
                <li><a href="#/ui/widgets"><i class="ti-angle-right"></i><span data-translate="WIDGETS"></span> <span class="badge badge-success">13</span></a></li>
                <li><a href="#/ui/timeline"><i class="ti-angle-right"></i><span data-translate="TIMELINE"></span></a></li>
                <li><a href="#/ui/nested-lists"><i class="ti-angle-right"></i><span data-translate="NESTED_LISTS"></span></a></li>
                <li><a href="#/ui/pricing-tables"><i class="ti-angle-right"></i><span data-translate="PRICING_TABLES"></span></a></li>
                <li><a href="#/ui/maps"><i class="ti-angle-right"></i><span data-translate="MAPS"></span></a></li>
                <li><a href="#/ui/grids"><i class="ti-angle-right"></i><span data-translate="GRIDS"></span></a></li>
            </ul>
        </li>
        <li>
            <a href="#/pages"><i class="ti-files"></i><span data-translate="PAGES"></span></a>
            <ul>
                <li><a href="http://iarouse.com/dist-magic/landing/" target="_blank"><i class="ti-angle-right"></i><span data-translate="LANDING"></span></a></li>
                <li><a href="#/pages/signin"><i class="ti-angle-right"></i><span data-translate="SIGN_IN"></span></a></li>
                <li><a href="#/pages/signup"><i class="ti-angle-right"></i><span data-translate="SIGN_UP"></span></a></li>
                <li><a href="#/pages/forgot-password"><i class="ti-angle-right"></i><span data-translate="FORGOT_PASSWORD"></span></a></li>
                <li><a href="#/pages/lock-screen"><i class="ti-angle-right"></i><span data-translate="LOCK_SCREEN"></span></a></li>
                <li><a href="#/pages/profile"><i class="ti-angle-right"></i><span data-translate="USER_PROFILE"></span></a></li>
                <li><a href="#/pages/invoice"><i class="ti-angle-right"></i><span data-translate="INVOICE"></span></a></li>
                <li><a href="#/pages/404"><i class="ti-angle-right"></i>404 <span data-translate="ERROR"></span></a></li>
                <li><a href="#/pages/500"><i class="ti-angle-right"></i>500 <span data-translate="ERROR"></span></a></li>
                <li><a href="#/pages/blank"><i class="ti-angle-right"></i><span data-translate="BLANK_PAGE"></span></a></li>
            </ul>
        </li>
        <li>
            <a href="#/table"><i class="ti-view-list"></i><span data-translate="TABLES"></span></a>
            <ul>
                <li><a href="#/tables/static"><i class="ti-angle-right"></i><span data-translate="STATIC_TABLES"></span></a></li>
                <li><a href="#/tables/responsive"><i class="ti-angle-right"></i><span data-translate="RESPONSIVE_TABLES"></span> <span class="badge badge-info">2</span></a></li>
                <li><a href="#/tables/dynamic"><i class="ti-angle-right"></i><span data-translate="DYNAMIC_TABLES"></span></a></li>
            </ul>
        </li>
        <li>
            <a href="#/form"><i class="ti-pencil"></i><span data-translate="FORMS"></span></a>
            <ul>
                <li><a href="#/forms/layouts"><i class="ti-angle-right"></i><span data-translate="FORM_LAYOUTS"></span></a></li>
                <li><a href="#/forms/elements"><i class="ti-angle-right"></i><span data-translate="FORM_ELEMENTS"></span> <span class="badge badge-info">14</span></a></li>
                <li><a href="#/forms/validation"><i class="ti-angle-right"></i><span data-translate="FORM_VALIDATION"></span></a></li>
                <li><a href="#/forms/wizard"><i class="ti-angle-right"></i><span data-translate="FORM_WIZARD"></span></a></li>
            </ul>
        </li>
       <li>
            <a href="#/charts"><i class="ti-bar-chart"></i><span data-translate="CHARTS"></span></a>
            <ul>
                <li><a href="#/charts/flot"><i class="ti-angle-right"></i>Flot <span data-translate="CHARTS"></span></a></li>
                <li><a href="#/charts/charts"><i class="ti-angle-right"></i>Other <span data-translate="CHARTS"></span></a></li>
            </ul>
        </li>
        <li class="divider nav-divider"></li>
        <li class="nav-title">
            <span data-translate="APPLICATION"></span>
        </li>
        <li class="nav-task">
            <a href="#/app/tasks">
                <i class="ti-check-box"></i><span data-translate="TASKS"></span>
            </a>
        </li>
        <li class="nav-task">
            <a href="#/app/calendar">
                <i class="ti-calendar"></i><span data-translate="CALENDAR"></span>
            </a>
        </li>
        <li>
            <a href="#/mail"><i class="ti-email"></i><span data-translate="MAIL"></span></a>
            <ul>
                <li><a href="#/mail/inbox"><i class="ti-angle-right"></i><span data-translate="INBOX"></span></a></li>
                <li><a href="#/mail/compose"><i class="ti-angle-right"></i><span data-translate="COMPOSE"></span></a></li>
                <li><a href="#/mail/single"><i class="ti-angle-right"></i><span data-translate="SINGLE_MAIL"></span></a></li>
            </ul>
        </li>
    </ul>
</div>